<template>
  <div class="vxetable-main-view">
    <div class="vxetable-query">
      <el-form :inline="true">
        <el-form-item label="url">
          <el-input v-model="form.url" style="width: 200px" placeholder="请求接口" />
        </el-form-item>
        <el-form-item label="params">
          <el-input
            v-model="form.params"
            type="textarea"
            style="width: 200px"
            placeholder="查询参数，json字符串"
          />
        </el-form-item>
        <el-form-item label="method">
          <el-select v-model="form.method" style="width: 80px">
            <el-option value="post" label="post" />
            <el-option value="get" label="get" />
          </el-select>
        </el-form-item>
        <el-form-item label="表格列字段">
          <el-input v-model="form.fields" style="width: 200px" placeholder="输入列字段,逗号隔开" />
        </el-form-item>
        <el-form-item label="是否树">
          <el-checkbox v-model="form.isTree" />
        </el-form-item>
        <el-form-item label="keyField">
          <el-input v-model="form.keyField" style="width: 100px" />
        </el-form-item>
        <template v-if="form.isTree">
          <el-form-item label="parentField">
            <el-input v-model="form.parentField" style="width: 100px" />
          </el-form-item>
          <el-form-item label="全部展开">
            <el-checkbox v-model="form.expandAll" />
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="getTree">查询</el-button>
        </el-form-item>
        <el-form-item> 共{{ tableData?.length }}条数据 </el-form-item>
        <el-form-item>
          <template v-if="result.duplicateKeys?.length">
            {{ `重复${state.keyField}：${result.duplicateKeys}` }}
          </template>
        </el-form-item>
        <el-form-item>
          <template v-if="result.circularReference?.length">
            {{ `循环引用：${result.circularReference}` }}
          </template>
        </el-form-item>
      </el-form>
    </div>
    <div class="vxetable-result" v-if="isShowTable">
      <vxe-table
        show-overflow
        border
        ref="xTreeRef"
        :show-header="true"
        :row-config="{ keyField: state.keyField, isCurrent: true, isHover: true }"
        height="auto"
        :column-config="{ resizable: true }"
        :tree-config="
          state.isTree
            ? {
                expandAll: state.expandAll,
                transform: true,
                rowField: state.keyField,
                parentField: state.parentField
              }
            : undefined
        "
        :data="tableData"
        :scroll-y="{ enabled: true, gt: 0 }"
      >
        <template v-for="(col, index) in result.columns" :key="col">
          <vxe-column :field="col" :title="col" :tree-node="state.isTree && index === 0" />
        </template>
      </vxe-table>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import { doApi } from '@/api/basic'
import { findCircularReference, findDuplicateKeys } from '@/utils/tree'
import { useStorage } from '@vueuse/core'

const form = useStorage('Test-Vxetable', {
  url: '/api/struct_editor/info',
  params: '{"id": 134}',
  method: 'post',
  keyField: 'node_id',
  parentField: 'parent_id',
  isTree: false,
  expandAll: false,
  fields: 'title, id, content, layer, node_id, parent_id'
})
const state = ref({})
const result = reactive({
  duplicateKeys: '',
  circularReference: '',
  columns: []
})
const isShowTable = ref(false)
const tableData = ref([])
// 查询树数据
const getTree = async () => {
  state.value = { ...form.value }
  isShowTable.value = false
  result.columns =
    state.value.fields?.split(/[,，；;]/)?.map((x) => x.replace(/^\s*|\s*$/g, '')) || []
  const res = await doApi(state.value.url, JSON.parse(state.value.params), state.value.method)
  tableData.value = res.data
  result.duplicateKeys = findDuplicateKeys(tableData.value, state.value.keyField)
  if (state.value.isTree && state.value.parentField) {
    result.circularReference = findCircularReference(
      tableData.value,
      state.value.keyField,
      state.value.parentField
    )
  } else {
    result.circularReference = ''
  }
  nextTick(() => {
    isShowTable.value = true
  })
  console.log('results===>', res)
}
getTree()
</script>
<style lang="less" scoped>
.vxetable-main-view {
  height: 100%;
  display: flex;
  flex-direction: column;

  .vxetable-query {
    padding: 10px 10px 0 10px;
    max-height: 50%;
    overflow: auto;
  }

  .vxetable-result {
    flex: 1;
  }

  :deep(.el-form-item__content) {
    white-space: normal;
    word-break: break-all;
  }
}
</style>
